<template>
  <div class="my-welfare clear">
    <div class="result-list">
      <div class="item top-item">
        <div class="flex-name clear">
          <img class="head-img" src="@/assets/jiangshijieshao02.png" alt="">
          <div class="name-info">
            <p class="name">王京雨</p>
            <p class="info"><img src="@/assets/wode01.png" alt=""> <span>中国智慧宝资深讲师</span></p>
          </div>
        </div>
        <div class="flex-num">
          <div class="block">
            <p class="num">2400.00</p>
            <p class="text">累计捐款(元)</p>
          </div>
          <div class="block">
            <p class="num">4</p>
            <p class="text">爱心次数(笔)</p>
          </div>
          <div class="block">
            <p class="num">2</p>
            <p class="text">捐赠项目(个)</p>
          </div>
        </div>
      </div>
      <div class="item">
        <p class="title">捐赠项目</p>
        <div class="pro">
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
          <div class="pro-item" @click="router({path: '/welfareList'})">
            <img class="pro-img" src="@/assets/zhihuibao16.png" alt="">
            <div class="con"> 
              <img src="@/assets/xuanzedingzhi02.png" alt="">
              <p class="pro-title">90%的家长正在经历的事情，日夜困惑煎熬</p>
              <p class="read">共捐赠 <em>136.00元</em></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


  export default {
    components: {
    },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.my-welfare
  min-height 100vh
  min-width 100vw
  background-color #f5f5f5
  .result-list
    padding-top 2rem
    background-image url('../../assets/jiangshijieshao01.png')
    background-repeat no-repeat
    background-size 100%
    width 100%
    .top-item      
      padding 1.2rem 1.6rem
    .item
      width 92%
      margin-left 4%
      border-radius .3rem
      background-color #fff
      box-sizing border-box
      margin-bottom 1rem
      .flex-name
        padding-bottom 2rem
        .head-img
          width 5rem
          height 5rem
          overflow hidden
          border-radius 50%
          float left
          margin-right 1rem
        .name-info
          float left
          line-height 2.3rem
          .name
            font-size 1.7rem
            color #333
            font-weight bold
            margin-top .4rem
          .info
            font-size 1.2rem
            color #666
            img
              display inline-block
              vertical-align middle
              width 1.2rem
              height 1.2rem
              position relative
              top -.1rem
            span
              display inline-block
              vertical-align middle
      .flex-num
        display flex
        .block
          flex 1
          text-align center
          &:nth-child(2)
            flex 1.8
          .num
            font-size 1.9rem
            color #333
            font-weight bold
            height 2rem
            line-height 2rem
            margin-bottom .5rem
          .text
            font-size 1.2rem
            color #666
      .title
        color #333
        font-size 1.5rem
        font-weight bold
        border-bottom 1px solid #e6e6e6
        line-height 4.5rem
        height 4.5rem
        padding 0 1.6rem
      .pro
        padding 0 1.6rem
        .pro-item
          margin-top 2rem
          padding-bottom 1rem
          display flex
          &:last-child
            padding-bottom 2rem
          .pro-img
            width 10rem
            height 7.5rem
            max-width 11.4rem
            margin-right 1.5rem
          .con
            width calc(100% - 13.5rem)
            position relative
            img
              position absolute
              width 0.5rem
              top .7rem
              right -2rem
            .pro-title
              font-size 1.3rem
              font-weight bold
              line-height 2.3rem
              color #212121
              margin-bottom .5rem
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
            .read
              height 1.2rem
              line-height 1.2rem
              font-size 1.2rem
              em
                color #A81E27
</style>
